<template>
  <el-row class="main" type="flex">
    <el-col :span="4" class="screen_item">
      <el-row type="flex" justify="space-between">
        <span>价格</span>
        <span>0-4000</span>
      </el-row>
      <el-row>
        <el-slider v-model="form.price_lt" @change="handleSlider" :max="maxnum"></el-slider>
      </el-row>
    </el-col>
    <el-col :span="4" class="screen_item">
      <el-row>住宿等级</el-row>
      <el-row class="dropdown_item">
        <el-dropdown class="filter-dropdown" @command="handleRank">
          <span class="el-dropdown-link">
            {{
            ['不限', form.hotellevel_in[0] + "星", "已选" + leveLenght + "项"][
            leveLenght > 2 ? 2 : leveLenght
            ]
            }}
            <i
              class="el-icon-arrow-down el-icon--right"
            ></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="(item,index) in hotelOptions.levels"
              :key="index"
              style="width:170px"
              :command="{id:item.id,name:item.name}"
            >
              <div>
                <i
                  :class="[form.hotellevel_in.indexOf(item.id)!==-1?'el-icon-circle-check':'iconfont iconcircle']"
                ></i>
                {{item.name}}
              </div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-row>
    </el-col>
    <el-col :span="4" class="screen_item">
      <el-row>住宿类型</el-row>
      <el-row class="dropdown_item">
        <el-dropdown class="filter-dropdown" @command="handleType">
          <span class="el-dropdown-link">
            {{acTypeName}}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="(item,index) in hotelOptions.types"
              :key="index"
              style="width:170px"
              :command="{id:item.id,name:item.name}"
            >
              <i
                :class="[form.hoteltype_in.indexOf(item.id)!==-1?'el-icon-circle-check':'iconfont iconcircle']"
              ></i>
              {{item.name}}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-row>
    </el-col>
    <el-col :span="4" class="screen_item">
      <el-row>酒店设施</el-row>
      <el-row class="dropdown_item">
        <el-dropdown class="filter-dropdown" placement="bottom" @command="handleAssets">
          <span class="el-dropdown-link">
            {{acAssetsName}}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="(item,index) in hotelOptions.assets"
              :key="index"
              style="width:170px"
              :command="{id:item.id,name:item.name}"
            >
              <i
                :class="[form.hotelasset_in.indexOf(item.id)!==-1?'el-icon-circle-check':'iconfont iconcircle']"
              ></i>
              {{item.name}}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-row>
    </el-col>
    <el-col :span="4" class="screen_item">
      <el-row>酒店品牌</el-row>
      <el-row class="dropdown_item">
        <el-dropdown class="filter-dropdown" @command="handleBrands">
          <span class="el-dropdown-link">
            {{acBrandsName}}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown" style="height:260px;overflow:auto">
            <el-dropdown-item
              v-for="(item,index) in hotelOptions.brands"
              :key="index"
              style="width:170px"
              :command="{id:item.id,name:item.name}"
            >
              <i
                :class="[form.hotelbrand_in.indexOf(item.id)!==-1?'el-icon-circle-check':'iconfont iconcircle']"
              ></i>
              {{item.name}}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-row>
    </el-col>
    <el-col :span="4" class="screen_item">
      <el-button type="primary" @click="handleBack">撤销条件</el-button>
    </el-col>
  </el-row>
</template>

<script>
export default {
  props: ["hotelOptions"],
  data() {
    return {
      maxnum: 4000,
      form: {
        price_lt: 4000, //价格
        hotellevel_in: [], //酒店星级
        hoteltype_in: [], //酒店类型
        hotelasset_in: [], //酒店设施
        hotelbrand_in: [], //酒店名称
      },
      nameForm: {
        rankName: [],
        typeName: [],
        assetsName: [],
        brandsName: [],
      },
    };
  },
  computed: {
    leveLenght() {
      return this.form.hotellevel_in.length;
    },
    acTrankName() {
      console.log(this.form.hotellevel_in, 12344);
      if (this.form.hotellevel_in.length == 0) {
        return "不限";
      } else if (this.form.hotellevel_in.length == 1) {
        return this.nameForm.rankName[0];
      } else {
        return `已选${this.form.hotellevel_in.length}项`;
      }
    },
    acTypeName() {
      if (this.form.hoteltype_in.length == 0) {
        return "不限";
      } else if (this.form.hoteltype_in.length == 1) {
        //console.log(this.hotelOptions);
        if (this.nameForm.typeName[0]) {
          return this.nameForm.typeName[0];
        } else {
          return "经济型";
        }
      } else {
        return `已选${this.form.hoteltype_in.length}项`;
      }
    },
    acAssetsName() {
      if (this.form.hotelasset_in.length == 0) {
        return "不限";
      } else if (this.form.hotelasset_in.length == 1) {
        //console.log(this.hotelOptions);
        if (this.nameForm.assetsName[0]) {
          return this.nameForm.assetsName[0];
        } else {
          return "wifi";
        }
      } else {
        return `已选${this.form.hotelasset_in.length}项`;
      }
    },
    acBrandsName() {
      if (this.form.hotelbrand_in.length == 0) {
        return "不限";
      } else if (this.form.hotelbrand_in.length == 1) {
        //console.log(this.hotelOptions);
        if (this.nameForm.brandsName[0]) {
          return this.nameForm.brandsName[0];
        } else {
          //获取id,
          return "七天连锁";
        }
      } else {
        return `已选${this.form.hotelbrand_in.length}项`;
      }
    },
  },
  methods: {
    //向地址栏拼接参数
    setUrlStr() {
      this.$router.push({
        query: { ...this.$route.query, ...this.form },
        path: "/hotel",
      });
    },
    //滑块移动事件
    handleSlider(val) {
      this.setUrlStr();
    },
    //点击星级列表事件
    handleRank(val) {
      console.log(this.nameForm);
      //先判断是否有这个值,如果有值则删除,没有则添加
      if (this.form.hotellevel_in.indexOf(val.id) == -1) {
        this.form.hotellevel_in.push(val.id);
        this.nameForm.rankName.push(val.name);
      } else {
        let index = this.form.hotellevel_in.indexOf(val.id);
        this.form.hotellevel_in.splice(index, 1);
        this.nameForm.rankName.splice(index, 1);
      }
      this.setUrlStr();
    },
    //点击酒店类型事件
    handleType(val) {
      //先判断是否有这个值,如果有值则删除,没有则添加
      if (this.form.hoteltype_in.indexOf(val.id) == -1) {
        this.form.hoteltype_in.push(val.id);
        this.nameForm.typeName.push(val.name);
      } else {
        let index = this.form.hoteltype_in.indexOf(val.id);
        this.form.hoteltype_in.splice(index, 1);
        this.nameForm.typeName.splice(index, 1);
      }
      this.setUrlStr();
    },
    //点击酒店设施事件
    handleAssets(val) {
      //先判断是否有这个值,如果有值则删除,没有则添加
      if (this.form.hotelasset_in.indexOf(val.id) == -1) {
        this.form.hotelasset_in.push(val.id);
        this.nameForm.assetsName.push(val.name);
      } else {
        let index = this.form.hotelasset_in.indexOf(val.id);
        this.form.hotelasset_in.splice(index, 1);
        this.nameForm.assetsName.splice(index, 1);
      }
      this.setUrlStr();
    },
    //点击酒店名称事件
    handleBrands(val) {
      //先判断是否有这个值,如果有值则删除,没有则添加
      if (this.form.hotelbrand_in.indexOf(val.id) == -1) {
        this.form.hotelbrand_in.push(val.id);
        this.nameForm.brandsName.push(val.name);
      } else {
        let index = this.form.hotelbrand_in.indexOf(val.id);
        this.form.hotelbrand_in.splice(index, 1);
        this.nameForm.brandsName.splice(index, 1);
      }

      this.setUrlStr();
    },
    //点击撤销条件事件
    handleBack() {
      this.form = {
        price_lt: 4000, //价格
        hotellevel_in: [], //酒店星级
        hoteltype_in: [], //酒店类型
        hotelasset_in: [], //酒店设施
        hotelbrand_in: [], //酒店名称
      };
      this.nameForm = {
        rankName: "不限",
        typeName: "不限",
        assetsName: "不限",
        brandsName: "不限",
      };
      let cityName = this.$store.state.hotel.cityName;
      //console.log(this.$store.state.hotel.cityName);
      this.$router.push({
        path: "/hotel",
        query: {
          cityName,
        },
      });
    },
  },
  mounted() {
    console.log(console.log());
    for (const key in this.form) {
      if (this.$route.query[key] && key != "price_lt") {
        if (typeof this.$route.query[key] == "object") {
          this.form[key] = this.$route.query[key].map((ele) => {
            return parseInt(ele);
          });
        } else {
          this.form[key].push(parseInt(this.$route.query[key]));
        }
      }
    }
  },
};
</script>

<style lang="less" scoped>
.main {
  color: #666;
  font-size: 14px;
  padding: 5px 0;
  height: 80px;
  border: 1px solid #ddd;
  .screen_item {
    border-right: 1px solid #ddd;
    padding: 5px 20px;
    &:nth-child(6) {
      border-right: none;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .dropdown_item {
      height: 38px;
      display: flex;
      align-items: center;
      .filter-dropdown {
        position: relative;
        width: 100%;
        .el-dropdown-link {
          display: flex;
          flex: 1;
          width: 100%;
          cursor: pointer;
          justify-content: space-between;
        }
      }
    }
  }
}
</style>